Path: blob/main/src/pages/[lang]/settings/pr.astro
976 views
---
import InstalledPlugins from "@components/catalog/InstalledPlugins.astro";
import SettingsCard from "@components/settings/SettingsCard.astro";
import Toast from "@components/toasts/Toast.svelte";
import ToastWrapper from "@components/toasts/ToastWrapper.svelte";
import Layout from "@layouts/Layout.astro";
import SettingsLayout from "@layouts/SettingsLayout.astro";
import SettingsSection from "@layouts/SettingsSection.astro";
import { Icon } from "astro-icon/components";
import { getLangFromUrl, useTranslations } from "../../../i18n/utils";
const lang = getLangFromUrl(Astro.url);
const t = useTranslations(lang);
import { MARKETPLACE_ENABLED } from "astro:env/client";
---
<Layout title="Settings">
<SettingsLayout title={t("settings.proxy")}>
<SettingsSection
title="Proxy"
subtitle="A wide variety of settings for the proxy/rewriter itself."
>
<div
class="w-full h-full flex flex-col items-center justify-center flex-wrap md:flex-row md:items-start md:justify-start gap-4"
>
<SettingsCard
title="Proxy"
description="Choose the proxy/rewriter that fits your needs"
input={{ input: false }}
button={{ name: "Change", id: "setproxy" }}
select={{
select: true,
name: "proxy",
options: [
{ name: "Automatic", value: "automatic", disabled: false },
{ name: "Ultraviolet", value: "uv", disabled: false },
{ name: "Scramjet (BETA)", value: "sj", disabled: false },
],
}}
both={{enabled: false}}
/>
<!-- SettingsCard
title="Open in"
description="Choose how to open your sites"
input={{ input: false }}
button={{ name: "Set", id: "setopenin" }}
select={{
select: true,
name: "openin",
options: [
{ name: "Embed", value: "embed", disabled: false },
{ name: "Direct", value: "direct", disabled: false },
{ name: "About:Blank", value: "a:b", disabled: false },
{ name: "Blob", value: "blob", disabled: false },
],
}}
both={{enabled: false}}
/ -->
<SettingsCard
title="Search Engine"
description="Choose your search engine"
input={{ input: false }}
button={{ name: "Set Search Engine", id: "setsearchengine" }}
select={{
select: true,
name: "searchengine",
options: [
{ name: "DuckDuckGo", value: "ddg", disabled: false },
{ name: "Bing", value: "bing", disabled: false },
],
}}
both={{enabled: false}}
/>
<SettingsCard
title="Wisp Server"
description="Choose the wisp server you feel is the fastest"
input={{ input: true, required: false, placeholder: 'wss://nebulaservices.org/wisp/' }}
button={{ name: "Select", id: "setwispurl" }}
select={{
select: true,
name: "wispurl",
options: [
{ name: "Default", value: "default", disabled: false },
{ name: "Custom", value: "custom", disabled: false }
],
}}
both={{
enabled: true,
showOnSelect: {value: 'custom'}
}}
/>
<SettingsCard
title="Transport"
description="Select the transport to use"
input={{ input: false }}
button={{ name: "Set transport", id: "settransport" }}
select={{
select: true,
name: "transport",
options: [
{ name: "Libcurl", value: "libcurl", disabled: false },
{ name: "Epoxy", value: "epoxy", disabled: false },
],
}}
both={{enabled: false}}
/>
</div>
</SettingsSection>
{
MARKETPLACE_ENABLED && (
<SettingsSection
title="Plugins"
subtitle="Plugins allow you to modify the way the proxy works (UV only, plugins are auto applied)"
>
<div class="flex flex-row gap-6 justify-center md:justify-normal">
<InstalledPlugins />
<a
href={`/${lang}/catalog/1`}
class="rounded-3xl bg-navbar-color w-64 flex flex-col"
>
<div class="w-full items-center justify-center flex aspect-[16/9]">
<Icon name="ph:plus-bold" class="h-16 w-16" />
</div>
<div class="h-2/6 text-center content-center p-3 font-semibold">
Get more plugins in the <strong>Nebula Catalog!</strong>
</div>
</a>
</div>
</SettingsSection>
)
}
</SettingsLayout>
<ToastWrapper client:load>
<Toast
toastProp={{
toastType: "success",
text: "Successfully changed proxy!",
class: "proxyMessage",
}}
client:load
/>
<!-- Toast
toastProp={{
toastType: "success",
text: "Saved selection!",
class: "openInMessage",
}}
client:load
/-->
<Toast
toastProp={{
toastType: "success",
text: "Saved Search Engine Selection!",
class: "searchEngineMessage",
}}
client:load
/>
<Toast
toastProp={{
toastType: "success",
text: "Wisp server selected!",
class: "wispUrlMessage",
}}
client:load
/>
<Toast
toastProp={{
toastType: "success",
text: "Transport set!",
class: "transportMessage",
}}
client:load
/>
</ToastWrapper>
</Layout>
<script>
import { EventHandler } from "@utils/events";
import { Elements, toast } from "@utils/index";
import { defaultStore } from "@utils/storage";
import { SettingsVals } from "@utils/values";
import { Settings } from "@utils/settings";
import { setTransport, SW } from "@utils/serviceWorker";
const init = async (): Promise<AsyncGenerator> => {
return Elements.select([
{ type: 'id', val: 'setproxy' },
{ type: 'id', val: 'proxy' },
{ type: 'id', val: 'setsearchengine' },
{ type: 'id', val: 'searchengine' },
{ type: 'id', val: 'setwispurl' },
{ type: 'id', val: 'wispurl' },
{ type: 'id', val: 'inputOnSelectValuecustom' },
{ type: 'id', val: 'settransport' },
{ type: 'id', val: 'transport' },
]);
}
const handleProxy = async (vals: AsyncGenerator) => {
const button = Elements.exists<HTMLButtonElement>(await vals.next());
const selectEl = Elements.exists<HTMLSelectElement>(await vals.next());
selectEl.value = defaultStore.getVal(SettingsVals.proxy.proxy.key);
Elements.attachEvent(button, "click", () => {
Settings.proxy.change(selectEl.value as "uv" | "sj" | "automatic");
toast(".proxyMessage");
});
}
const handleSearchEngine = async (vals: AsyncGenerator) => {
const button = Elements.exists<HTMLButtonElement>(await vals.next());
const selectEl = Elements.exists<HTMLSelectElement>(await vals.next());
selectEl.value = defaultStore.getVal(SettingsVals.proxy.searchEngine);
Elements.attachEvent(button, "click", () => {
Settings.proxy.searchEngine(selectEl.value);
toast(".searchEngineMessage");
});
}
const handleWispServers = async (vals: AsyncGenerator) => {
const handleCustom = async (c: HTMLInputElement, removeClass: boolean) => {
if (!removeClass) return c.classList.add("hidden");
const sw = SW.getInstances().next().value as SW;
const { bareMuxConn } = await sw.getSWInfo();
c.classList.remove("hidden");
if (c.value === "") return c.value = defaultStore.getVal("customWispUrl");
defaultStore.setVal("customWispUrl", c.value);
await setTransport(bareMuxConn);
toast(".wispUrlMessage");
}
const button = Elements.exists<HTMLButtonElement>(await vals.next());
const selectEl = Elements.exists<HTMLSelectElement>(await vals.next());
const custom = Elements.exists<HTMLInputElement>(await vals.next());
selectEl.value = defaultStore.getVal(SettingsVals.proxy.wispServer);
Elements.attachEvent(button, "click", () => {
Settings.proxy.wisp(selectEl.value);
selectEl.value === "custom" ? handleCustom(custom, true) : handleCustom(custom, false)
toast(".wispUrlMessage");
});
};
const handleTransports = async (vals: AsyncGenerator) => {
const button = Elements.exists<HTMLButtonElement>(await vals.next());
const selectEl = Elements.exists<HTMLSelectElement>(await vals.next());
selectEl.value = defaultStore.getVal(SettingsVals.proxy.transport.key);
Elements.attachEvent(button, "click", () => {
Settings.proxy.transport(selectEl.value as "libcurl" | "epoxy");
toast(".transportMessage");
});
};
new EventHandler({
events: {
"astro:page-load": async () => {
const v = await init();
await handleProxy(v);
await handleSearchEngine(v);
await handleWispServers(v);
await handleTransports(v);
}
},
logging: false
})
.bind();
</script>